<template>
	<view>
		<view
			:class="state === 0 ? 'pad-b-80' : ''"
		>
			<!-- 任务信息部分 -->
			<view
				v-for="(item, index) in taskInfos"
				:key="index"
				style="margin-bottom: 1px;"
			>
				<CellInput
					v-if="item.prop !== 'repairDesc' && item.prop !== 'cartTypeDesc' && item.prop !== 'weixiuType'"
					v-model="item.value"
					:isReadonly="item.readonly"
					:label="item.label"
					:placeholder="item.placeholder"
					:theme="item.theme"
					:inputBorder="item.isBorder ? item.border : 'none'"
					:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
					:rightIcon="item.isRight ? item.rightIcon : ''"
					:rightIconColor="item.isRight ? item.rightIconColor : ''"
					@handleRightIconClick="handleRightIconClick($event, item)"
				/>
				
				<!-- 报修类别 -->
				<view
					v-if="item.prop === 'weixiuType'"
					class="bg-white flex align-center font-14"
					style="margin-top: 1px;"
				>
					<view class="flex align-center w-px-90 h-px-50 mar-l-15 mar-r-10" style="border-right: 1px #eeeeee solid;">
						<text>报修类别</text>
					</view>
					
					<view class="flex align-center flex-1">
						<CustomRadio
							class="mar-y-5 mar-r-10"
							v-for="(j, i) in weixiuTypes"
							:groudId="1"
							:key="i"
							:iconType="'checkbox'"
							:label="j.label"
							:name="j.name"
							:value="j.checked"
							:in-active-value="1"
							:active-value="0"
							@handleRadioClick="handleChangeWeixiu($event, item)"
						/>
					</view>
				</view>
				
				<RepairDesc
					v-if="item.prop === 'repairDesc' || item.prop === 'cartTypeDesc'"
					:label="item.label"
					:textMsgList="item.textMsgList"
					:pictureList="item.pictureList"
					:voiceList="item.voiceList"
					:videoList="item.videoList"
					@handleClick="handleRepairDesc($event, item)"
				/>
			</view>
		</view>
		
		<view
			v-if="state === 0"
			class="pos-f bg-white flex align-center pad-x-10 shadow-type-7"
			style="left: 0; bottom: 0; right: 0; height: 60px;"
		>
			<u-button type="success" @click="handleAgree()">同意</u-button>
			<u-button type="error" class="mar-x-10" @click="returnOrder()">退回</u-button>
			<u-button type="primary" @click="closeOrder()">关单</u-button>
		</view>
	</view>
</template>

<script>
	import CellInput from '@/components/CellInput/index'
	import RepairDesc from '@/components/RepairDesc/index'
	import CustomRadio from '@/components/CustomRadio/index'
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	
	export default {
		components: {
			CellInput,
			RepairDesc,
			CustomRadio
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList,
				classifyList: state => state.repair.classifyList,
			}),
		},
		
		watch: {
			// 监听故障件列表变化
			repairList(newVal, oldVal) {
				this.isOperate = true
			}
		},
		
		data() {
			return {
				state: 0, // 没有状态，此处默认为 0
				cartNum: '', // 车号
				customerName: '', // 客户名称
				
				// 任务信息
				taskInfos: [],
				
				// 维修类型列表
				weixiuTypes: [
					{ id: 0, label: '维修', checked: 1, name: 'weixiu' },
					{ id: 1, label: '保养', checked: 0, name: 'baoyang' }
				],
			}
		},
		
		onLoad(options) {
			// 设置页面传过来的参数
			this.state = parseInt(options.state)
			this.cartNum = options.cartNum
		},
		
		mounted() {
			this.initComponent() // 初始化组件
			this.findOrderDetails() // 查询订单详情
		},
		
		onUnload() {
			// 页面卸载后，重置一些状态管理中的数据
			this.$store.commit('repair/setDescInfo', { type: 1, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 2, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 3, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 4, data: [] })
			this.$store.commit('repair/resetRepairComponent', [])
		},
		
		methods: {
			// 初始化组件
			initComponent() {
				// 任务信息
				this.taskInfos = [
					{
						prop: 'contacts', // 字段
						label: '联系人', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'mobile', // 字段
						label: '联系电话', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'address', // 字段
						label: '维修地址', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dizhi', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}, {
						prop: 'cartNumber', // 字段
						label: '车号', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'cartType', // 字段
						label: '车型', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'cartTypeDesc', // 字段
						label: '车型描述', // 字段名称
						pageTitle: '车型描述',
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'repairDesc', // 字段
						label: '故障描述', // 字段名称
						pageTitle: '故障描述',
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'weixiuType', // 字段
						label: '报修类别', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: 0, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'time', // 字段
						label: '预约时间', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'state', // 字段
						label: '状态', // 字段名称
						readonly: this.state === 0 ? false : true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: this.state === 0 ? true : false, // 是否显示边框
						border: this.state === 0 ? 'surround' : '', // 只有 isBorder 为 true 才生效
					}
				]
			},
			
			// 查询订单详情数据，并回显
			findOrderDetails() {
				let data = {
					contacts: '李四',
					address: '安徽合肥',
					mobile: '18254857568',
					cartNumber: '皖A125428',
					cartType: '叉车',
					applyPerson: '羚羊测试账号1',
					dispatchResult: '张三',
					cartType: '叉车',
					cartTypeDesc: {
						title: '车型描述',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
					repairDesc: {
						title: '故障描述',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
					weixiuType: '0', // 0 维修，1 保养
					time: '2024/11/01 20:46',
					state: '维修经理派工'
				}
				
				this.showData(data) // 回显数据
			},
			
			// 回显数据，data：需要回显的数据集合
			showData(data) {
				// 设置任务信息
				this.taskInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'repairDesc' &&
							item.prop !== 'cartTypeDesc'
						) {
							item.value = data[i]
						}
						
						// 车型描述
						if (item.prop === 'cartTypeDesc') {
							item.label = data.cartTypeDesc.title
							item.textMsgList = data.cartTypeDesc.textMsgList
							item.pictureList = data.cartTypeDesc.pictureList
							item.voiceList = data.cartTypeDesc.voiceList
							item.videoList = data.cartTypeDesc.videoList
						}
						
						// 故障描述
						if (item.prop === 'repairDesc') {
							item.label = data.repairDesc.title
							item.textMsgList = data.repairDesc.textMsgList
							item.pictureList = data.repairDesc.pictureList
							item.voiceList = data.repairDesc.voiceList
							item.videoList = data.repairDesc.videoList
						}
					}
				})
			},
			
			// 修改详情中某个字段下的属性值
			// type：1 车辆信息
			// field：要修改哪个字段中的数据
			// attr：要修改哪个字段下的哪个属性值集合（因为可能是多个属性同时修改）
			// data：修改后的值
			updateData({ type, field, attrs, data}) {
				if (type === 1) {
					// 修改车辆信息中数据
					this.cartInfos.forEach(item => {
						if (item.prop === field) {
							let arr = attrs.split(',')
							
							arr.forEach(j => {
								item[j] = data[j]
							})
						}
					})
				}
			},
			
			// 添加故障件
			handleAddRepairInfo(data) {
				let obj = {
					classifyTitle: '系统分类',
					classifyName: data.classifyTitle,
					isExpand: true,
					list: [
						{
							label: '名称',
							value: data.name,
							prop: 'name',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '图件号',
							value: data.num,
							prop: 'num',
							theme: this.state === 2 ? 'input' : 'table',
							readonly: this.state === 2 ? false : true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						},
						{ label: '单价', value: data.unitPrice, prop: 'unitPrice', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '附件', value: '', prop: 'attachment', pageTitle: '故障描述', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '需求数量', value: data.demand, prop: 'demand', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '申请数量', value: data.apply, prop: 'apply', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '单位', value: data.unit, prop: 'unit', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{
							label: '故障件条码',
							value: '',
							prop: 'repairNo',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							repairNoList: []
						}, {
							label: '维修类型',
							value: '',
							prop: 'repairType',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							isEdit: true,
						},
					]
				}
				
				// 将添加的故障件信息加入到状态管理中
				this.$store.commit('repair/setRepairComponent', obj)
			},
			
			// 点击添加故障件中的附件时，设置跳转到下一个页面的标题
			setAttchmentTitle(index) {
				let title = '故障描述'
				
				return title
			},
			
			// 点击系统分类名称时的回调（展开/收起信息）
			handleExpand(index) {
				let repairList = JSON.parse(JSON.stringify(this.repairList))
				
				repairList.map((item, i) => {
					if (i === index) {
						item.isExpand = !item.isExpand
						
						return item
					}
				})
				
				this.$store.commit('repair/resetRepairComponent', repairList)
			},
			
			// 点击时间轴跳转到相应页面
			toTimeAxis() {
				uni.navigateTo({
					url: `/pages/repairManage/repairHistory/timeAxis?cartNum=${this.cartNum}`
				})
			},
			
			// 切换维修类型
			handleChangeWeixiu(data, row) {
				let arr = this.weixiuTypes.filter(item => item.name === data && item.checked === 1)
				
				if (row.readonly) return
				if (arr.length > 0) return
				
				this.weixiuTypes.forEach((item, index) => {
					item.checked = 0
					
					if (item.name === data) {
						item.checked = 1
					}
				})
			},
			
			// 同意
			handleAgree() {
				uni.navigateTo({
					url: '/pages/repairDispatch/dispatched/dispatched'
				})
			},
			
			// 退回
			returnOrder() {
				
			},
			
			// 关单
			closeOrder() {
				
			}
		}
	}
</script>

<style>

</style>
